<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Promise状态</title>
</head>
<body>

    <h3>请在终端中查看Promise对象的状态</h3>

    <button class="fulfill">兑现</button>
    <button class="reject">拒绝</button>

    <script type="text/javascript">
        // 定义一个用来根据选择器选择匹配该选择器的首个元素的函数
        const $ = selector => document.querySelector( selector );

        // 执行器
        const executor = (resolve,reject) => {
            $( '.fulfill' ).addEventListener( 'click' , () => resolve('你好坏哦，我好喜欢') , false );
            $( '.reject' ).addEventListener( 'click' , () => reject('你是个好人，值得拥有更好的') , false );
        }

        // 创建 Promise实例 ( 在 Promise 构造函数内部调用 executor 并为其传入两个参数 )
        const first = new Promise( executor );
        console.table( first );

        // 当 Promise实例 变成 已兑现状态（fulfilled）时调用的函数
        const onFulfilled = theFulfillmentValue => {
            console.log( 'the fulfillment  value: ' , theFulfillmentValue );
            show();
        }

        // 当 Promise实例 变成 已拒绝状态（rejected）时调用的函数
        const onRejected = rejectionReason => {
            console.log( 'rejection reason: ' , rejectionReason );
            show();
        }

        // 1、通过 Promise实例 调用 then 函数时，then 函数会立即执行 (属于同步执行)
        // 2、异步调用参数对应的函数
        //    第一种情况: 状态已经转换为 fulfilled 时，则异步调用 then 函数第一个参数对应的函数(onFulfilled)
        //    第二种情况: 状态已经转换为 fejected 时，则异步调用 then 函数第二个参数对应的函数(onRejected)
        // 3、同步执行的 then 函数都会立即返回一个新的 Promise实例
        const second = first.then( onFulfilled , onRejected );
        console.table( second );

        // 在 first 状态改变后会调用 first.then 参数中的一个函数(根据状态选择调用那个函数)
        // first.then 的参数对应的函数执行后会影响 second 状态的变化
        const third = second.then( onFulfilled , onRejected );
        console.table( third );

        // 1、通过 Promise实例 调用 catch 函数时，catch 函数会立即执行 (属于同步执行)
        // third.then 的参数对应的函数执行后会影响 third 的状态变化
        const fourth = third.catch( onRejected );
        console.table( fourth );

        function show(){
            console.log( '- - - - - - first - - - - - -' );
            console.table( first );
            console.log( '- - - - - - second - - - - - -' );
            console.table( second );
            console.log( '- - - - - - third - - - - - -' );
            console.table( third );
        }
    </script>

    <hr>

    <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">
        Promise.prototype.then( [ onFulfilled [ , onRejected ] ])
    </a>
    
</body>
</html>